<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面不存在 | 404错误</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6',
                        secondary: '#F97316',
                        dark: '#1E293B',
                        light: '#F8FAFC'
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .text-shadow {
                text-shadow: 0 2px 4px rgba(0,0,0,0.1);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
        }

        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="font-inter bg-gradient-to-br from-light to-blue-50 min-h-screen flex flex-col items-center justify-center p-4 text-dark">
    <div class="max-w-4xl w-full mx-auto text-center">
        <!-- 装饰元素 -->
        <div class="absolute top-0 left-0 w-full h-full overflow-hidden -z-10">
            <div class="absolute -top-20 -left-20 w-64 h-64 bg-primary/10 rounded-full blur-3xl"></div>
            <div class="absolute top-1/3 right-10 w-80 h-80 bg-secondary/10 rounded-full blur-3xl"></div>
            <div class="absolute bottom-10 left-1/4 w-72 h-72 bg-green-500/5 rounded-full blur-3xl"></div>
        </div>

        <!-- 404 主视觉 -->
        <div class="relative mb-8">
            <div class="text-[clamp(10rem,30vw,15rem)] font-bold text-primary/90 leading-none tracking-tight">
                404
            </div>
            <div class="absolute inset-0 flex items-center justify-center">
                <div class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark animate-pulse-slow">
                    页面走丢了
                </div>
            </div>
        </div>

        <!-- 错误描述 -->
        <div class="mb-10 px-4">
            <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold mb-4 text-dark">抱歉，您访问的页面不存在</h2>
            <p class="text-lg md:text-xl text-gray-600 max-w-2xl mx-auto mb-6">
                您要找的页面可能已被移除，名称已更改或暂时不可用。
            </p>
            <div class="inline-flex items-center justify-center space-x-1 text-sm text-gray-500">
                <i class="fa fa-clock-o"></i>
                <span id="current-time">加载中...</span>
            </div>
        </div>

        <!-- 装饰图形 -->
        <div class="relative w-full h-40 mb-10">
            <div class="absolute left-1/2 top-0 transform -translate-x-1/2 w-64 h-64 border-4 border-primary/20 rounded-full animate-float"></div>
            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-48 h-48 border-4 border-primary/30 rounded-full animate-float" style="animation-delay: -2s"></div>
            <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 w-32 h-32 border-4 border-primary/40 rounded-full animate-float" style="animation-delay: -4s"></div>
        </div>
    </div>

    <script>
        // 显示当前时间
        function updateTime() {
            const now = new Date();
            const options = { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric', 
                hour: '2-digit', 
                minute: '2-digit', 
                second: '2-digit',
                timeZoneName: 'short'
            };
            document.getElementById('current-time').textContent = now.toLocaleString('zh-CN', options);
        }
        
        // 初始化时间并设置定时器
        updateTime();
        setInterval(updateTime, 1000);
        
        // 添加页面加载动画
        document.addEventListener('DOMContentLoaded', () => {
            document.body.classList.add('opacity-100');
            document.body.classList.remove('opacity-0');
        });
    </script>
</body>
</html>    